<template>
  <el-dialog
    v-model="visible"
    :title="props.id ? '修改Criteo申请开户' : 'Criteo申请开户'"
    width="60%"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <div>
      <ApplyStepView />
      <div style="margin-top: 20px">
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="120px"
          class="application-form"
        >
          <el-form-item
            label="公司名称"
            prop="enterpriseName"
            class="form-item"
          >
            <el-input
              v-model="formData.enterpriseName"
              placeholder="请输入公司名称"
            />
          </el-form-item>
          <el-form-item
            label="公司注册地址 "
            prop="enterpriseAddress"
            class="form-item"
          >
            <el-input
              v-model="formData.enterpriseAddress"
              placeholder="请输入公司注册地址 "
            />
          </el-form-item>
          <el-form-item label="开户邮箱" prop="email" class="form-item">
            <el-input v-model="formData.email" placeholder="请输入开户邮箱" />
          </el-form-item>
          <el-form-item
            label="广告主投放信息"
            prop="advertisementInfo"
            class="form-item"
          >
            <el-input
              v-model="formData.advertisementInfo"
              placeholder="请输入广告主投放信息"
              type="textarea"
            />
          </el-form-item>
          <el-form-item
            label="广告主网站"
            prop="promotionLink"
            class="form-item"
          >
            <el-input
              v-model="formData.promotionLink"
              placeholder="请输入广告主网站"
            />
          </el-form-item>
          <el-form-item
            label="宣传国家"
            prop="campaignCountries"
            class="form-item"
          >
            <el-input
              v-model="formData.campaignCountries"
              placeholder="请输入宣传国家"
            />
          </el-form-item>
          <el-form-item label="月预算" prop="budget" class="form-item">
            <el-input-number
              v-model="formData.budget"
              placeholder="请输入月预算"
            />
          </el-form-item>
          <el-form-item
            label="营业执照附件"
            prop="businessLicenseUrl"
            class="form-item"
          >
            <ImageUpload v-model="formData.businessLicenseUrl" :limit="1" />
          </el-form-item>
          <el-form-item label="联系人" prop="contactName" class="form-item">
            <el-input
              v-model="formData.contactName"
              placeholder="请输入联系人"
            />
          </el-form-item>
          <el-form-item
            label="联系人电话"
            prop="contactPeople"
            class="form-item"
          >
            <el-input
              v-model="formData.contactPeople"
              placeholder="请输入联系人电话"
              maxlength="11"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
      <el-button @click="handleCancel"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit"> 提交开始申请 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import ApplyStepView from "../apply-step.vue";
import { computed, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { handleApply } from "@/utils/accountApply";
import { applyPlatform } from "@/const/index.ts";
import { getApplyAccountDetail, editApplyAccount } from "@/api/apply/index.js";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
});
const detailInfo = ref({});
const emits = defineEmits(["update:value", "on-success"]);
const formRef = ref();

const visible = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});

const formData = reactive({
  systemType: applyPlatform.CRITEO,
  enterpriseName: "",
  enterpriseAddress: "",
  advertisementInfo: "",
  campaignCountries: "",
  budget: "",
  promotionLink: "",
  email: "",
  businessLicenseUrl: "",
});

const formRules = reactive({
  enterpriseName: [
    { required: true, message: "请输入公司名称", trigger: "blur" },
  ],
  enterpriseAddress: [
    { required: true, message: "请输入公司地址", trigger: "blur" },
  ],
  email: [{ required: true, message: "请输入开户邮箱", trigger: "blur" }],
  advertisementInfo: [
    { required: true, message: "请输入广告主投放信息", trigger: "blur" },
  ],
  promotionLink: [
    { required: true, message: "请输入广告主网站", trigger: "blur" },
    {
      pattern: /^https?:\/\/.+/,
      message: "请输入正确的网站链接",
      trigger: "blur",
    },
  ],
  campaignCountries: [
    { required: true, message: "请输入宣传国家", trigger: "blur" },
  ],
  budget: [{ required: true, message: "请输入月预算", trigger: "blur" }],
  businessLicenseUrl: [
    { required: true, message: "请上传添加营业执照附件", trigger: "blur" },
  ],
  contactName: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  contactPeople: [
    { required: true, message: "请输入联系人电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的电话码格式",
      trigger: "blur",
    },
  ],
});

// 提交表单
function handleSubmit() {
  try {
    if (!formRef.value) return;

    formRef.value.validate(async (valid) => {
      if (valid) {
        formData.mediaCriteo = {
          // enterpriseAddress: formData.enterpriseAddress,
          advertisementInfo: formData.advertisementInfo,
          campaignCountries: formData.campaignCountries,
          budget: formData.budget,
        };
        if (formData.id) {
          formData.mediaCriteo.id = detailInfo.value.mediaCriteo.id;
          formData.mediaCriteo.mediaId = detailInfo.value.mediaCriteo.mediaId;
          await editApplyAccount(formData);
          emits("on-success");
          ElMessage.success("修改成功");
        } else {
          await handleApply(formData);
          ElMessage.success("申请成功");
        }
        visible.value = false;
      }
    });
  } catch (error) {}
}

// 取消
function handleCancel() {
  visible.value = false;
  // 重置表单数据
  Object.assign(formData, {
    enterpriseName: "",
    enterpriseAddress: "",
    advertisementInfo: "",
    campaignCountries: "",
    budget: "",
    promotionLink: "",
    email: "",
    businessLicenseUrl: "",
    mediaCriteo: {},
  });
  formRef.value?.resetFields();
}

function getDetail() {
  getApplyAccountDetail(props.id).then(({ data }) => {
    detailInfo.value = data;
    Object.assign(formData, {
      ...data,
      ...data.mediaCriteo,
    });
  });
}

watch(
  () => visible.value,
  (val) => {
    if (val && props.id) {
      getDetail();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
